<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>生意帮</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        html,
        body {
            background-color: transparent;
        }
        .boxB {
          position: relative;;
          width: 100%;
          height: 100vh;
        }
        .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.3);
        }
        .box {
            padding: 0.7rem 0.5rem 0;
            background-color: #fff;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }

        .aui-content {
            padding-bottom: 0.7rem;
            border-bottom: 1px solid #e6e6e6;
        }

        .head_right .aui-pull-right {
            border: 1px solid #999;
            border-radius: 50%;
            height: 1rem;
            width: 1rem;
            text-align: center;
            line-height: 1rem;
        }

        .aui-iconfont {
            font-size: 0.6rem;
            vertical-align: top;
        }

        .head_right {
            position: relative;
        }

        .price {
            color: #f23030;
            font-size: 0.8rem;
            margin-bottom: 0.25rem;
        }

        .repertory {
            margin-bottom: 0.25rem;
            font-size: 0.7rem;
            color: #333;
            margin-right: 0.9rem
        }

        .xuanz {
            font-size: 0.7rem;
            color: #333;
        }

        .xuanz span {
            margin-left: 0.25rem;
        }

        .xuanz span:after {
            content: '”';
        }

        .xuanz span:before {
            content: '“';
        }

        .cp_txt {
            position: absolute;
            left: 0.5rem;
            bottom: 0;
            line-height: 0.8rem;
        }

        .title {
            padding: 0.7rem 0 0.5rem;
            font-size: 0.8rem;
            line-height: 0.8rem;
        }

        .ys_xuanx,
        .cm_xuanx {
            padding-bottom: 0.7rem;
            border-bottom: 1px solid #e6e6e6;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        .ys_xuanx ul li,
        .cm_xuanx ul li {
            /*width: 18%;*/
            /*float: left;*/
            display: inline-block;
            padding: 0 0.4rem;
            margin-right: 2.5%;
            height: 1.5rem;
            line-height: 1.5rem;
            border-radius: 0.8rem;
            background-color: #f5f5f5;
            color: #4d4d4d;
            font-size: 0.6rem;
            text-align: center;
        }

        .ys_xuanx ul li:last-of-type,
        .cm_xuanx ul li:last-of-type {
            margin-right: 0;
        }

        .ys_xuanx .active,
        .cm_xuanx .active {
            background-color: #f23030;
            color: #fff;
        }

        .goumai>div {
            border-color: #fff;
            background-color: #f5f5f5;
        }

        .Submit {
            color: #fff;
            text-align: center;
            height: 2rem;
            line-height: 2rem;
            font-size: 0.7rem;
            background-color: #f23030;
            border-radius: 1rem;
            margin-bottom: 0.7rem;
        }
        .head_img{
          background:url(../../image/cpimg.jpg) center center/cover no-repeat;
          width:4.5rem;
          height:4.5rem;
        }
        .aui-bar-btn-sm .aui-bar-btn-item{
          line-height: 1.2rem;
          padding: 0 0.2rem;
        }
        .goumai>div{
          margin-left:4px;
          margin-right: 5px;
        }

                .goumai>div.countNum {
                    width: 100%;
                    float: right;
                    margin-left: 2rem;
                    background: #fff;
                }

                .countNum input[type="number"] {
                    width: 1.2rem;
                    height: 1.2rem;
                    border: 1px solid #cccccc;
                    text-align: center;
                    float: left;
                    font-size: 0.6rem;
                        border-left: none;
                        border-right: none;
                }

                .countNum input[type="button"] {
                    padding: 0 0.5rem;
                    height: 1.2rem;
                    border: 1px solid #cccccc;
                    text-align: center;
                    float: left;
                    font-size: 0.6rem;
                }

                .countNum input[disabled] {
                    color: #ccc;

                }
    </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="boxB">
      <div class="mask" onclick="openF()"></div>
        <div class="box">
            <div class="aui-content">
                <div class="aui-row">
                    <div class="aui-col-xs-4 head_left">
                        <div class="head_img" v-if="goods_ps_contone.pic=='' || goods_ps_contone.pic==null "></div>
                        <div class="head_img" :style="{backgroundImage:'url(' + goods_ps_contone.pic + ')'}" v-else></div>
                    </div>

                    <div class="aui-col-xs-8 head_right">
                        <div class="aui-pull-right"  onclick="openF()">
                            <span class="aui-iconfont aui-icon-close"></span>
                        </div>
                        <div class="repertory">库存{{goodName}}件</div>
                        <div class="repertory" style="color:#f23030">￥{{goods_ps_cont.price}}</div>
                    </div>

                </div>
            </div>
            <div class="title" style="line-height:1.3rem;">
                购买数量
                <div class="goumai aui-bar aui-bar-btn aui-bar-btn-sm" style="width:30%;float:right">
                    <div class="countNum clearfix">
                        <input type="button" value='-'  @click="numDel()" :disabled="num <= 1 ? 'disabled' : false"  />
                        <input type="number" size='3' readonly v-model='num' />
                        <input type="button" value='+' @click="numAdd()"/>
                    </div>
                </div>
            </div>
            <div class="Submit" @click="submitBtn">
                确定
            </div>
        </div>
    </div>
  </div>

</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>
<script type="text/javascript" src="../../script/aui-lazyload.js"></script>
<script type="text/javascript">
    function openF() {
        api.closeFrame({
            name: 'purchaseTwo'
        });
    }

    apiready = function() {


      api.parseTapmode();
      var type = api.pageParam.type;
      var id = api.pageParam.id;

      var app = new Vue({
        el: '#app',
        data: {
          goods_ps_cont: [],
          num:1,
          goods_ps_contone:'',
          goodName:''
        },
        created: function() {
          var $_this = this;

        },
        methods: {

          numAdd:function(){
            $_this=this;
            $_this.num++;
            // $_this.goods_ps_cont.price=$_this.goods_ps_cont.price*$_this.num;
          },
          numDel:function(){
            $_this=this;
            $_this.num--;
            // $_this.goods_ps_cont.price=$_this.goods_ps_cont.price*$_this.num;
          },
          submitBtn:function(){
            var _this = this
            console.log(_this.num)
            api.openWin({
                name: "order",
                url: '../three_frame/order.html',
                pageParam: {
                    under_type: 1,
                    goodsId: api.pageParam.goodsId,
                    num: _this.num,
                    sku_id: '',
                    exchange_id: api.pageParam.exchange_id,
                    exchange_sku_id: api.pageParam.exchange_sku_id,
                    shop_id:api.pageParam.shop_id
                }
            })
          }
        },
        mounted: function () {
          //console.log(JSON.stringify(api.pageParam.data))
            this.goods_ps_cont= api.pageParam.data
            this.goods_ps_contone = api.pageParam.data.tv_pic
            this.goodName = api.pageParam.data.goods_name
            // console.log(JSON.stringify(api.pageParam.data.goods_name))
        }
      })
    }
</script>

</html>
